<template>
  <div class="realtime-situation">
    <HeadBar
      :title="$t('dataAnalysis.goodsDet')"
      :date-options="dateOptions"
      :date-type="5"
      :show-export="isAuth('flow:prod:survey')"
      @date-change="onDateChange"
      @export="onExport"
    />
    <!-- 商品概况列表 -->
    <ProdTable :prod-data="prodData" />
  </div>
</template>

<script setup>
import { ElLoading, ElMessage } from 'element-plus'
import { isAuth } from '@/utils'
import HeadBar from './head-bar.vue'
import ProdTable from './prod-table.vue'

const dateOptions = [
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  },
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  }
]

// 时间更新
// 1:今日实时 2:近七天 3:近30天 4:自然日 5:自然月
let dateType = 2
let dateRange = []
const onDateChange = (data) => {
  dateRange = data.dateRange
  let tempType
  switch (data.timeType) {
    case 4:
      tempType = 1
      break
    case 5:
      tempType = 2
      break
    case 6:
      tempType = 3
      break
    case 1:
      tempType = 4
      break
    case 3:
      tempType = 5
      break
  }
  dateType = tempType
  prodData.dateValue = tempType
  getProdSurvey()
}

/**
 * 获取商品概况数据
 */
const prodData = reactive({
  dateValue: 2, // 商品整体概况,时间选择状态
  data: {
    newProd: 0, // 新增商品数
    visitedProd: 0, // 被访问商品数
    dynamicSale: 0, // 动销商品数
    expose: 0, // 商品曝光数
    shareVisit: 0, // 分享访问数
    browse: 0, // 商品浏览量
    visitor: 0, // 商品访客数
    addCart: 0, // 加购件数
    orderNum: 0, // 下单件数
    payNum: 0 // 支付件数
  }, // 商品整体概况数据
  lastData: {},
  rate: {}
}) // 商品 概况列表
const getProdSurvey = () => {
  http({
    url: http.adornUrl('/platform/prodAnalysis/getProdSurvey'),
    method: 'get',
    params: http.adornParams(
      {
        shopId: null,
        dateType,
        startTime: dateRange[0],
        endTime: dateRange[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      prodData.data = data.data
      prodData.lastData = data.lastData
      prodData.rate = data.rate
    }
  })
}

const onExport = () => {
  const loading = ElLoading.service({
    lock: true,
    target: '.realtime-situation',
    customClass: 'export-load',
    background: 'transparent',
    text: $t('shop.exportIng')
  })
  http({
    url: http.adornUrl('/platform/prodAnalysis/prodSurveyExport'),
    method: 'get',
    params: http.adornParams({
      shopId: null,
      dateType,
      startTime: dateRange[0],
      endTime: dateRange[1]
    }),
    responseType: 'blob'
  }).then(({ data }) => {
    loading.close()
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
    const fileName = $t('dataAnalysis.goodsDet') + '.xlsx'

    const elink = document.createElement('a')
    if ('download' in elink) { // 非IE下载
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
    ElMessage({
      message: $t('shop.exportSuccess'),
      type: 'success',
      duration: 1500
    })
  }).catch(() => {
    loading.close()
  })
}
</script>

<style lang="scss" scoped>

</style>
